<template>
  <div class="mod-prod-info">
    <el-table :data="value" width="500px" border>
      <el-table-column type="index" label="序号" align="center" show-overflow-tooltip></el-table-column>
      <el-table-column prop="bname" label="许可证号" align="center">
        <template slot-scope="scope">
          <el-input size="small" v-model="scope.row.certificateno" @change="handleEdit(scope.$index, scope.row)"></el-input>
        </template>
      </el-table-column>
      <el-table-column prop="totalsets" label="绑定楼号" align="center">
        <template slot-scope="scope">
          <el-input size="small" v-model="scope.row.bindbuildingno" @change="handleEdit(scope.$index, scope.row)"></el-input>
        </template>
      </el-table-column>
      <el-table-column prop="presalesets" label="发证日期" align="center">
        <template slot-scope="scope">
          <el-input size="small" v-model="scope.row.issuedate" @change="handleEdit(scope.$index, scope.row)"></el-input>
        </template>
      </el-table-column>

      <el-table-column label="操作" width="100" header-align="right">
        <template slot-scope="scope">
          <div style="display: flex;justify-content: space-between;">
            <el-link icon="el-icon-plus" size="mini" type="primary"
                     @click="handleAdd(scope.$index, scope.row)" :underline="false"
                     style="font-size: 14px;margin-left: 40px"></el-link>
            <el-link icon="el-icon-delete" size="mini" @click="handleDelete(scope.$index, scope.row)"
                     type="danger" :underline="false"></el-link>
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
export default {
  data () {
    return {
      // 数据库中的规格
      tableData: [],
      // 根据选定的规格所查询出来的规格值
      dbSpecValues: [],
      specs: [], // 使用的规格
      initing: false
    }
  },
  props: {
    value: {
      default: [],
      type: Array
    },
    pname: {
      default: '',
      type: String
    },
    pid: {
      default: 0,
      type: Number
    }
  },
  watch: {

  },
  // activated: function () {
  //   this.$emit('input', [Object.assign({}, this.defalutSku)])
  // },
  created: function () {
  },
  computed: {
  },
  methods: {
    init(pid) {
    },
    handleAdd(index, row) {
      this.value.push({
        certificateno: '',
        bindbuildingno: '',
        issuedate: ''
      })
    },
    handleEdit(index, row) {
      console.log(index, row);
      console.log(this.value);
    },
    handleDelete(index, row) {
      if (index > 0) {
        this.value.splice(index, 1)
      }
    },
    tableRowClassName({ row, rowIndex }) {
      if ((rowIndex+1)%2 === 1) {
        return 'warning-row'
      } else {
        return 'success-row'
      }
      return ''
    }
  }
}
</script>
<style>
.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}
</style>
